/**
 *   从local Storage中获取数据 
 *   渲染用户头像和昵称
 */
function doShowUser() {
    let linshiStr = localStorage.getItem('LINSHI')
    let data = JSON.parse(linshiStr)
    if (data) {
        showUser(data)

    }

}

doShowUser()

function showUser(data) {
    let userbox = document.querySelector('.userImg')
    let topStr = `<img src=${data[0].headerimg} alt="" />
    <p>${data[0].username}欢迎您</p>`
    userbox.innerHTML = topStr
}

/**
 * 实现退出页面功能
 */

function doOutPage() {
    let outBtn = document.querySelector('#outPage')
    outBtn.addEventListener('click', function () {
        localStorage.removeItem('LINSHI')
        alert('退出账号成功！')
    })
}
doOutPage()
/**
 * 购物车跳转功能
 */
function doGoshoppingcart() {
    let gosc = document.querySelector('.shoppingCartBtn')
    gosc.addEventListener('click', function () {
        let cart = localStorage.getItem('LINSHI')
        if (cart) {
            location.href = "shoppingCart.html"
        } else {
            alert('请您先登录哦')
        }
    })
}
doGoshoppingcart()
//轮播图的实现
function doSwiper() {
    showSwiper()
}

//调用接口 使用myPromise
function showSwiper() {
    myPromise({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/banner'
    }).then(function (data) {
        if (data.resultCode == 1) {
            let bannerList = data.resultInfo.list
            loadBanner(bannerList)
        }
    })
}
let pageNo = 1
//获取到数据后，动态渲染数据到页面中
function loadBanner(bannerList) {

    let bannerStr = bannerList.map(function (item) {
        return `<div><img  src="${item.url}" alt="${item.content}" style="width: 100%; height: 100%;"></div>`
    }).join('')

    let bannerContent = document.querySelector('#bContent')
    bannerContent.innerHTML = bannerStr

    layui.use("carousel", function () {
        var carousel = layui.carousel
        //建造实例
        carousel.render({
            elem: "#test1",
            width: "100%",
            height: "100%", //设置容器宽度
            arrow: "always", //始终显示箭头
            indicator: "none",
            // anim: "updown", //切换动画方式
        })
    })
}

//动态加载商品
function doGoods() {

    showGoods(pageNo)
}
//调用接口。获取商品数据
function showGoods(pageNo) {
    myPromise({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/list',
        data: {
            pageSize: '8',
            pageNo
        }
    }).then(function (data) {
        if (data.resultCode == 1) {
            let goodsList = data.resultInfo.list
            loadGoods(goodsList)
        }
    })
}
//拿到获取的商品数据后 。动态渲染到页面的相应位置
let allStr = ''
function loadGoods(goodsList) {
    let showGoods = document.querySelector('.showGoods')
    let goodsStr = goodsList.map(function (item) {
        let jiage = item.price
        let jiageStr = jiage.toString()
        let index = jiageStr.indexOf('.')
        let f2M = jiageStr.slice(0, 2)

        let newStr = ''
        if (index == -1) {
            newStr = "00"
        } else {
            newStr = jiageStr.slice(index + 1,)
        }

        return `<li name="product"  onclick="onDetail(${item.id})">
            <div class="goods" data-index="${item.id}"><img src="${item.picture}" alt="${item.shop}" name="photo"  />
            <div class="chart">
              <p class="intro">${item.product}</p>
              <div class="baoyou">
                <div class="tianmao">天猫</div>
                <div>包邮</div>
              </div>
              <span class="wenzi">￥<span class="w2st">${f2M}</span>.${newStr}</span>
              <span class="yimai">800人已买</span>
            </div></div>
          </li>`
    }).join('')
    allStr += goodsStr
    showGoods.innerHTML = allStr
}
// 加载更多

function moreGoods() {
    let moreBtn = document.querySelector('#moreBtn')
    moreBtn.addEventListener('click', function () {
        showGoods(++pageNo)
    })
}
//进入详情界面
function onDetail(id) {
    location.href = '../pages/detail.html?id=' + id

}

/**
 * 实现搜索功能   
 * 
 */
let pageNos = 1
function doSearch() {
    let ipt = document.querySelector('#search')
    let searchBtn = document.querySelector('.searchBtn')
    searchBtn.addEventListener('click', function () {
        let keyword = ipt.value
        myPromise({
            method: 'get',
            url: 'http://api.yuguoxy.com/api/shop/search',
            data: {
                keyword,
                pageSize: 8,
                pageNo: pageNos
            }
        }).then(data => {
            if (data.resultCode == 1) {
                let goodsData = data.resultInfo.list
                let showGoods = document.querySelector('.showGoods')
                let goodsStr = goodsData.map(function (item) {
                    let jiage = item.price
                    let jiageStr = jiage.toString()
                    let index = jiageStr.indexOf('.')
                    let f2M = jiageStr.slice(0, 2)

                    let newStr = ''
                    if (index == -1) {
                        newStr = "00"
                    } else {
                        newStr = jiageStr.slice(index + 1,)
                    }

                    return `<li name="product"  onclick="onDetail(${item.id})">
                        <div class="goods" data-index="${item.id}"><img src="${item.picture}" alt="${item.shop}" name="photo"  />
                        <div class="chart">
                          <p class="intro">${item.product}</p>
                          <div class="baoyou">
                            <div class="tianmao">天猫</div>
                            <div>包邮</div>
                          </div>
                          <span class="wenzi">￥<span class="w2st">${f2M}</span>.${newStr}</span>
                          <span class="yimai">800人已买</span>
                        </div></div>
                      </li>`
                }).join('')

                showGoods.innerHTML = goodsStr
            }
        })
    })
}


doSearch()
moreGoods()
doSwiper()
doGoods()
